<template>
  <el-pagination
    ref="paginationRef"
    class="pagination"
    :small="tablePage.small"
    :total="tablePage.total"
    :page-size="tablePage.pageSize ?? 10"
    :page-count="tablePage.pageCount"
    :pager-count="tablePage.pageCount"
    :current-page="tablePage.pageNumber ?? 1"
    :layout="tablePage.layout ?? 'total, sizes,  prev, pager, next, jumper'"
    :page-sizes="tablePage.pageSizes || [10, 20, 30, 40, 50]"
    :disabled="tablePage.disabled"
    :hide-on-single-page="tablePage.hideOnSinglePage ?? true"
    @size-change="onPageSizeChange"
    @current-change="onPageIndexChange"
  >
  </el-pagination>
</template>

<script>
export default {
  name: "IElPager",
  props: {
    tablePage: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      currentPage: {
        pageSize: this.tablePage.pageSize ?? 10,
        pageNumber: this.tablePage.currentPage ?? 1,
      },
    };
  },
  methods: {
    onPageIndexChange(index) {
      this.currentPage.pageNumber = index;
      this.$emit("onChange", index, this.currentPage.pageSize);
    },
    onPageSizeChange(size) {
      this.currentPage.pageSize = size;
      this.$emit("onChange", this.currentPage.pageNumber, size);
    },
  },
};
</script>

<style lang="scss" scoped>
.pagination {
  text-align: end;
  margin: 1.5rem 2rem;
  margin-left: 0;

  ::v-deep .btn-next,
  ::v-deep .btn-prev,
  ::v-deep .el-pager li {
    border: 1px solid #dcdfe6;
    border-radius: 6px !important;
  }

  ::v-deep .el-pager {
    .number {
      margin-right: 10px;
      min-width: 28px;
      &:first-child {
        margin-left: 10px;
      }
      &:hover {
        color: #fff !important;
        background-color: #409eff;
        border: 1px solid #409eff;
      }
    }

    .active {
      color: #fff;
      background-color: #409eff;
      border: 1px solid #409eff;
    }
  }

  ::v-deep .el-input__inner {
    border-radius: 6px !important;
  }
  ::v-deep .el-icon-more {
    margin-right: 10px !important;
  }
  ::v-deep .el-icon-d-arrow-right,
  ::v-deep .el-icon-d-arrow-left {
    margin-right: 10px !important;
  }
}
</style>
